<template>
	<view class="container">
		<u-navbar :isMpWx="true" title="预览简历" :border-bottom="false" :background="{ background: '#fff' }">
			<template v-slot:right>
				<view class="u-flex" @tap="tomyResume">
					<u-icon name="edit-pen-fill" color="#101010" size="32"></u-icon>
					<text style="font-size: 24rpx;">编辑简历</text>
				</view>
			</template>
		</u-navbar>
		<view class="container_main u-p-b-160" style="padding-bottom: 180rpx;">
			<view class="container_main_item" style="background-color: #fff;">
				<text class="required litleNavBig">基本信息</text>
				<view class="u-flex u-row-between spaceB" >
					<view class="u-flex u-m-t-26" v-if="data.datalist.basic">
						<u-avatar size="80" :src="data.datalist.basic.photo_img_src || ''"></u-avatar>
						<view class="u-m-l-10">
							<text
								class="litleNavBig">{{data.datalist.basic.fullname?data.datalist.basic.fullname:"姓名"}}</text>
							<view class="u-m-t-10 litleNav">
								<text>{{data.datalist.basic.age ? `${data.datalist.basic.age}岁`:'年龄'}}</text>
								<text>·{{data.datalist.basic.experience_text}}</text>
								<text>·{{data.datalist.basic.education_text || '学历'}}</text>
							</view>
						</view>
					</view>
					<view class="righticonbox" @tap="$u.throttle(tomyResume, 2000)">
						<image src="/pages/pagesPersonal/static/preview.png"></image>
						<text>完善简历{{data.datalist.basic.complete_percent}}%</text>
					</view>
				</view>
				<view class="u-flex u-row-between spaceB" style="color: #101010;font-size: 24rpx;align-items: center;">
					<view class="iphone">
						<image src="/pages/pagesPersonal/static/iPhone.png"></image>
						<text>{{data.datalist.contact.mobile}}</text>
					</view>
					<view class="wechat">
						<image src="/pages/pagesPersonal/static/wechat.png"></image>
						<text>{{data.datalist.contact.weixin}}</text>
					</view>
				</view>
				<view class="u-flex u-row-between" style="color:#828282;font-size: 26rpx;align-items: flex-end;">
					<text>{{`${$u.timeFormat(data.datalist.basic.updatetime, 'yyyy-mm-dd hh:MM:ss')}更新`}}</text>
					<view style="color:#00d075;" @tap="data.isModel = true"><text>更多基本信息</text> <u-icon
							name="arrow-right" size="28"></u-icon>
					</view>
				</view>
			</view>
			<view class="container_main_item" v-if="data.datalist.intention_list.length>0">
				<view class="u-flex u-row-between">
					<text class="required litleNavBig">求职意向</text>
				</view>
				<view class="u-flex u-row-between u-m-t-32" v-for="item in data.datalist.intention_list" :key="item.id">
					<view class="litleNav">
						<view class="u-flex u-m-t-10">
							<text class="u-m-r-20">{{item.nature_text}}</text>
							<text>{{item.trade_text}}</text>
						</view>
					</view>
				</view>
			</view>

			<view class="container_main_item" v-if="data.datalist.basic.tag_text">
				<view class="u-flex u-row-between">
					<text class="required litleNavBig">特长标签</text>
				</view>
				<!-- <text class="u-m-t-26 litleNav">
					{{data.datalist.basic.tag_text || '请添加特长标签'}}
				</text> -->

				<view class="u-m-t-26 litleNav tagbtnss">
					<view class="tagbtn" v-for="(item,index) in data.datalist.basic.tag_text_arr" :key="index">
						<text class="tagbytnone">{{item}}</text>
					</view>
					<text v-if="!data.datalist.basic.tag_text">请添加特长标签</text>
				</view>
			</view>


			<view class="container_main_item" v-if="data.datalist.basic.specialty">
				<view class="u-flex u-row-between">
					<text class="required litleNavBig">自我描述</text>

				</view>
				<view class="u-m-t-26 litleNav jobJl">
					{{data.datalist.basic.specialty || '请填写自我描述'}}
				</view>
			</view>

			<view class="container_main_item" v-if="data.datalist.education_list.length>0">
				<view class="u-flex u-row-between">
					<text class="litleNavBig">教育经历</text>
				</view>
				<view class="u-m-t-28" v-for="item in data.datalist.education_list" :key="item.id"
					@click="goEducation('edit',item)">
					<view class="u-flex u-row-between">
						<text class="litleNav textLang">{{item.school}}</text>
						<text class="litleNav"
							style="text-align: right;">{{item.endtime == 0 ?`${$u.timeFormat(item.starttime, 'yyyy.mm')}-至今` : `${$u.timeFormat(item.starttime, 'yyyy.mm')} - ${$u.timeFormat(item.endtime, 'yyyy.mm')}`}}</text>
					</view>
					<view class="u-flex u-row-between u-m-t-20">
						<view class="u-flex" style="color: #646464;font-size: 26rpx;">
							<text class="u-m-r-20">{{item.education_text}}</text>
							<text class="textLang">{{item.major}}</text>
						</view>
					</view>
				</view>

			</view>

			<view class="container_main_item" v-if="data.datalist.work_list&&data.datalist.work_list.length>0">
				<view class="u-flex u-row-between">
					<text class="litleNavBig">工作经历</text>
				</view>
				<view class="u-m-t-20" v-for="item in data.datalist.work_list" :key="item.id">
					<view class="u-flex u-row-between u-m-b-16">
						<text class="litleNav textLang">{{item.companyname}}</text>
						<text class="litleNav"
							style="text-align: right;">{{item.endtime == 0 ?`${$u.timeFormat(item.starttime, 'yyyy.mm')}-至今` : `${$u.timeFormat(item.starttime, 'yyyy.mm')} - ${$u.timeFormat(item.endtime, 'yyyy.mm')}`}}</text>
					</view>
					<view class="u-flex u-row-between">
						<text class="u-m-b-10 litleNav textLang">{{item.jobname}}</text>
					</view>
					<text class="u-white-50 litleNav jobJl">{{`内容：${item.duty}`}}</text>
				</view>
			</view>

			<view class="container_main_item" v-if="data.datalist.training_list&&data.datalist.training_list.length>0">
				<view class="u-flex u-row-between">
					<text class="litleNavBig">培训经历</text>
				</view>
				<view class="u-m-t-20" v-for="item in data.datalist.training_list" :key="item.id">
					<view class="u-flex u-row-between u-m-b-16">
						<text class="litleNav textLang">{{item.agency}}</text>
						<text class="litleNav"
							style="text-align: right;">{{item.endtime == 0 ?`${$u.timeFormat(item.starttime, 'yyyy.mm')}-至今` : `${$u.timeFormat(item.starttime, 'yyyy.mm')} - ${$u.timeFormat(item.endtime, 'yyyy.mm')}`}}</text>
					</view>
					<view class="u-flex u-row-between">
						<text class="u-m-b-10 litleNav textLang">{{item.course}}</text>
					</view>
					<text class="u-white-50 litleNav jobJl">{{`培训内容：${item.description}`}}</text>
				</view>
			</view>

			<view class="container_main_item" v-if="data.datalist.project_list&&data.datalist.project_list.length>0">
				<view class="u-flex u-row-between">
					<text class="litleNavBig">项目经历</text>
				</view>
				<view class="u-m-t-20" v-for="item in data.datalist.project_list" :key="item.id">
					<view class="u-flex u-row-between u-m-b-16">
						<text class="litleNav textLang">{{item.projectname}}</text>
						<text class="litleNav"
							style="text-align: right;">{{item.endtime == 0 ?`${$u.timeFormat(item.starttime, 'yyyy.mm')}-至今` : `${$u.timeFormat(item.starttime, 'yyyy.mm')} - ${$u.timeFormat(item.endtime, 'yyyy.mm')}`}}</text>
					</view>
					<view class="u-flex u-row-between">
						<text class="u-m-b-10 litleNav textLang">{{item.role}}</text>
					</view>
					<text class="u-white-50 litleNav jobJl">{{`项目描述：${item.description}`}}</text>
				</view>
			</view>

			<view class="container_main_item" v-if="data.datalist.certificate_list&&data.datalist.certificate_list.length>0">
				<view class="u-flex u-row-between">
					<text class="litleNavBig">获得证书</text>
				</view>
				<view class="container_main_item_tag u-flex">
					<view class="tagbox" v-for="item in data.datalist.certificate_list" :key="item.id">
						<text>{{item.name }}</text>
						<view class="">
							<text>{{$u.timeFormat(item.obtaintime, 'yyyy.mm')}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="container_main_item" v-if="data.fileList && data.fileList.length>0">
				<view class="u-flex u-row-between" style="margin-bottom: 15rpx;">
					<text class="litleNavBig">我的作品</text>
				</view>
				<u-upload :file-list="data.fileList" :deletable="false" :custom-btn="true" ref="uUpload1" name="file">
				</u-upload>
			</view>
		</view>
		<view class="container_btn">
			<u-button type="primary" hover-class="none" :customStyle="data.customStyle" @click="$u.throttle(shareClick,1000)">立即分享</u-button>
		</view>
		<u-modal @confirm="confirm" title="更多基本信息" :mask-close-able="true" :title-style="data.titleStyle"
			v-model="data.isModel">
			<view class="slot-content morepro">
				<view class="modelist">
					<text>婚姻状态:</text>
					<text>{{data.datalist.basic.marriage_text || '未填写'}}</text>
				</view>
				<view class="modelist">
					<text>身高:</text>
					<text>{{data.datalist.basic.height==0? '未填写':data.datalist.basic.height}}</text>
				</view>
				<view class="modelist">
					<text>专业:</text>
					<text>{{data.datalist.basic.major_text || '未填写'}}</text>
				</view>
				<view class="modelist">
					<text>籍贯:</text>
					<text class="textLang">{{data.datalist.basic.householdaddress || '未填写'}}</text>
				</view>
				<view class="modelist">
					<text>现居住地:</text>
					<text class="textLang">{{data.datalist.basic.residence || '未填写'}}</text>
				</view>
				<view class="modelist">
					<text>身份证号:</text>
					<text>{{data.datalist.basic.idcard || '未填写'}}</text>
				</view>
			</view>
		</u-modal>
		<!-- 分享弹窗 -->
		<u-share :show="data.isShare" :src="data.src" @change="$u.throttle(shareClick,1000)"
			@close="data.isShare = false"></u-share>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue"
	import {
		onReady,
		onShow,
		onLoad
	} from '@dcloudio/uni-app'

	const data = reactive({
		customStyle:{
			background:'#00d075',
			color:'#fff',
			border:'none'
		},
		isNav: true,
		datalist: {
			basic: {},
			contact: {},
			intention_list: [],
			work_list: [],
			education_list: [],
			certificate_list: []

		},
		isModel: false,
		titleStyle: {
			'font-size': '32rpx',
			'color': '#000',
			'font-weight': 'bold'
		},
		isShare: false,
		src: "",
		fileList: []
	})

	// 获取在线简历数据
	const getOnlineMangeData = async () => {
		let res = await uni.$u.api.getOnlineMange()
		if (res) {
			data.datalist = res
			if (data.datalist.img_list.length != 0) {
				data.fileList = res.img_list.map(item => {
					return {
						url: item.img_src,
						id: item.id
					}
				})
			}
		}
	}
	// 分享
	const shareClick = async () => {
		try {
			let list = await uni.$u.api.getTplindexList()
			uni.showLoading()
			let params = {
				type: 'resume',
				id: data.datalist.basic.id,
				index: uni.$u.random(1, list.length)
			}
			let res = await uni.$u.api.getPosterGenerate({
				params
			})
			uni.hideLoading()
			data.isShare = true
			data.src = res
		} catch (e) {
			uni.hideLoading()
			uni.$u.toast('生成海报失败，请联系客服')
		}
	}
	const confirm = () => {
		data.isModel = false
	}
	onShow(() => {
		getOnlineMangeData()

	})
	const tomyResume = () => {
		uni.$u.route("pages/pagesPersonal/myResume/myResume")
	}
</script>

<style lang="scss">
	page,
	body {
		width: 100vw;
		height: 100%;
		background-color: #f8f8f8;
	}

	.container {

		&_main_item {
			padding: 28rpx 50rpx;
			border-bottom: 1rpx solid #eee;

			&_tag {
				flex-wrap: wrap;

				.tagbox {
					width: 100%;
					padding: 8rpx 0;
					font-size: 26rpx;
					color: #767676;
					// background-color: #dcdcdc;
					// margin-right: 12rpx;
					margin-top: 10rpx;
					display: flex;
					justify-content: space-between;
				}
			}
		}

		:deep(.u-navbar) {
			padding-right: 30rpx !important
		}

		.u-flex {
			// margin-right: 20rpx;

			text {
				white-space: nowrap !important;
			}
		}

		&_btn {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			margin: 0 auto;
			padding: 40rpx;
			z-index: 999;
			background-color: #fff;

			&_custom {
				border: 1px solid #3584e0 !important;
				color: #5598EA !important;
			}
		}

		.job_status {
			padding-top: 38rpx;

			.ls_item {
				padding: 19rpx 0;
				text-align: center;
				font-size: 32rpx;
				color: #000000;
				border-bottom: 1rpx solid #CCCCCC;
			}

			.ls_item--active {
				color: #3584E0;
				padding: 19rpx 0;
				text-align: center;
				font-size: 32rpx;
				border-bottom: 1rpx solid #CCCCCC;
			}
		}

		.righticonbox {
			width: 240rpx;
			height: 50rpx;
			background-color: #eee;
			border-radius: 25rpx;
			font-size: 24rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 30rpx;
				height: 30rpx;
			}
		}

		.container_main_item {
			background-color: #fff;
		}
	}

	.litleNav {
		color: #646464;
		font-size: 26rpx;
	}

	.litleNavBig {
		color: #000;
		font-size: 36rpx;
		font-weight: bold;
	}

	.morepro {
		padding: 30rpx;

		.modelist {
			margin: 20rpx 0;
			font-size: 26rpx;
			display: flex;
			align-items: center;

			text:nth-child(1) {
				display: inline-block;
				width: 150rpx;
				text-align: right;
			}

			text:nth-child(2) {
				margin-left: 20rpx;
			}
			.textLang {
				display: inline-block;
				width: 50%;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}
	}

	.jobJl {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		/* 多行文本排列方式 */
		-webkit-line-clamp: 3;
		/* 最多显示2行 */
		-webkit-box-orient: vertical;
		/* 文本排列方向 */
		// width: 120px;
		width: 100%;
	}

	.textLang {
		display: inline-block;
		width: 50%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.tagbtnss {
		display: flex;
		flex-wrap: wrap;

		.tagbtn {
			height: 50rpx;
			margin: 6rpx;

			.tagbytnone {
				padding: 10rpx;
				background-color: #f8f8f8;
				border-radius: 6rpx;
			}
		}
	}

	.wechat {
		display: flex;
		align-items: flex-end;
		image {
			margin-right: 5rpx;
			width: 49rpx;
			height: 41rpx;
		}

	}

	.iphone {
		display: flex;
		align-items: flex-end;
		image {
			margin-right: 5rpx;
			width: 28rpx;
			height: 42rpx;
		}
	}
	
	.spaceB{
		margin-bottom: 30rpx;
	}
</style>